<template>
  <div class="usertop">
    <div class="content">
      <div class="user-img">
        <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
      </div>
      <div class="user-info">
        <p>.浪潮.</p>
        <p
          style="color:hsla(0,0%,100%,.7);font-size:12px;margin-top:10px;"
          class="user-id"
        >
          id: jd_7f9e317c35dc5
        </p>
      </div>
      <div class="user-set">
        <van-icon
          name="setting-o"
          size="20px"
          style="margin-top:5px;"
          color="#ffffff"
          @click="jump"
        />
      </div>
    </div>
    <div class="wallet">
      <ul>
        <li>
          <span>我的资产</span>
        </li>
        <li>
          <span>优惠券</span>
        </li>
        <li 
         @click="handleToaddress"
        >
          <span>地址管理</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "Self-top",
  data() {
    return {
    };
  },
  methods: {
     jump () {
       this.$router.push({path: "/userinfo"})
    },
    handleToaddress () {
       this.$router.push({path: "/address"})
    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
  .usertop
    max-width 450px
    width 100%
    height 130px
    background linear-gradient(to right, rgba(235, 61, 60, 1), rgba(252, 115, 88, 1))
    padding-top 30px
    overflow hidden

    .content
      width 90%
      margin 0 auto
      display flex
      flex-direction row
      justify-content space-between

      .user-img
        img
          width 60px
          height 60px
          border-radius 50%

      .user-info
        margin 10px 85px 0 0
        font-size 14px
        color #ffffff

        .user-id
          color hsla(0, 0%, 100%, .7)
          font-size 12px
          margin-top 10px

      .user-set
        font-size 14px

    .wallet
      font-size 16px
      width 90%
      height 45px
      margin 25px auto
      background #ffffff
      border-radius 5px 5px 0 0

      ul
        width 100%
        display flex
        flex-direction row

        li
          width 33.33%
          height 45px
          line-height 45px
          text-align center
</style>
